import React, { Component } from "react";
import ReactDOM from "react-dom";
import $ from "jquery";
import Comment from "./Comments"
import { setcookie, getcookie, delcookie } from "./cookie";

class Details extends Component {
  componentDidMount() {
    var checkedColor = "";
    var checkedP = "";
    var Pz='';
    var checkedPrice = "";
    var oldPrice=''
    $("body").css({
      "overflow-x": "hidden"
    });
    
    $(window).on('scroll',function(){
      if($(window).scrollTop()>90){
        $('.mainHeader').hide();
        $('#menu').hide();
      }else{
        $('#menu').show();
        $('.mainHeader').show();
        
      }

    })
    var productId = getcookie("pId");
    $(".cColor").on("click", function() {
      checkedColor = $(this).attr("title");
      $(this)
        .css({ border: "2px orange solid" })
        .siblings(".cColor")
        .css({ border: "2px #fff solid" });
    });
    $(".car_deploy").on("click", function() {
      checkedP = $(this).attr("title");
      Pz=$(this).html();
      let i = checkedP.indexOf("$");
      oldPrice=parseInt($('#price').html().slice(1));
      console.log(oldPrice);
      $("#addMore")
        .html(
          "+" +
            $(this)
              .attr("title")
              .slice(i)
        )
        .css({ "text-decoration": "none", color: "orangered" });
      checkedPrice = parseInt(
        $(this)
          .attr("title")
          .slice(i + 1)
      );
      $(this)
        .css({ border: "2px orange solid" })
        .siblings(".car_deploy")
        .css({ border: "2px #fff solid" });
    });
    $(".addToCar").on("click", function() {
      
      if (checkedColor === "" || checkedP === ""||!getcookie('name')) {
        if(!getcookie('name')){
         $("#addMore")
          .html('请先登录')
          .css({ "text-decoration": "underline", color: "red" });
          }else{
            $("#addMore")
              .html("请选择您的配置和颜色")
              .css({ "text-decoration": "underline", color: "red" });}
        
      } else {
        $.ajax({
          url: "http://10.31.160.71:3000/product/data/" + productId,
          method: "PUT",
          data: {
            color: checkedColor,  
            configure: checkedP,
            elsePrice: checkedPrice
          }
        }).then(function(res) {
          var arr=[];
          if(getcookie('products')){
             var arr=getcookie('products').split(',');
             arr=[...arr];
          };
          arr.push(getcookie('pId'));
          setcookie('products',arr.toString(),7);
          
          $(location).prop("href", "http://localhost:8080/#/cart");
          $('#toBuy').show();
          $('.yanse').html(checkedColor+'   ');
          $('.peizhi').html(Pz+'   ');
          $('.shangpin').html($('.big-title').html());
          $('.newprice').html(checkedPrice+oldPrice)
        });
                                                                                                                                              }
    });
    fetch("http://10.31.160.71:3000/product/data/" + productId, {
      method: "GET"
    }).then(function(res) {
      res.json().then(function(json) {
        $("#tou .big-title").html(json.name);
        $("#price").html("$" + json.price + '<span id="addMore"></span>');
        $(".one-img img").attr("src", json.url1);
        $(".two-img img").attr("src", json.url2);
        $(".three-img img").attr("src", json.url3);
        $(".same_x").html(json.desc);
      });
    });
  }
  close(){
    $('#toBuy').hide()
  }
  render() {
    return (
      <div>
        <div id='toBuy'>
        <em className="cBtn" onClick={this.close}>X</em>
        <h5>您即将购买的商品是：</h5>
        <p className="xq"><span className='peizhi'>顶配</span><span>的</span><span className='yanse'>红色</span><span className='shangpin'>法拉利</span></p>
        <h5>您即将支付<span className='pTip'>(请您认真填写您的详细信息)：</span></h5>
        <p className="xq newprice">$0</p>
        <form>
  <div className="form-row">
    <div className="form-group col-md-6">
      <label htmlFor="inputEmail4">Email</label>
      <input type="email" className="form-control" id="inputEmail4" placeholder="Email" />
    </div>
    <div className="form-group col-md-6">
      <label htmlFor="inputEmail4">Phone</label>
      <input type="email" className="form-control" id="inputEmail4" placeholder="Phone" />
    </div>
  </div>
  <div className="form-group">
    <label htmlFor="inputAddress">Address</label>
    <input type="text" className="form-control" id="inputAddress" placeholder="1234 Main St" />
  </div>
  
  <div className="form-row">
    <div className="form-group col-md-6">
      <label htmlFor="inputCity">City</label>
      <input type="text" className="form-control" id="inputCity" />
    </div>
    <div className="form-group col-md-4">
      <label htmlFor="inputState">取车方式</label>
      <select id="inputState" className="form-control">
        <option selected>到店自取</option>
        <option>空运到家</option>
        <option>送货上门</option>
      </select>
    </div>
    
  </div>
  <div className="form-group">
    <div className="form-check">
      <input className="form-check-input" type="checkbox" checked id="gridCheck" />
      <label className="form-check-label" htmlFor="gridCheck">
        <a href="javascript:;">请仔细阅读以下协议</a>
      </label>
    </div>
  </div>
 
</form>
          <button type="button" className="btn btn-success yes" onClick={this.close}>确定</button>
          <button type="button" className="btn btn-secondary no" onClick={this.close}>取消</button>
        </div>
        <div id="menu" />
        <header id="tou">
          <h1 className="big-title" />

          <div id="modelinfo">

          </div>
        </header>

        <div id="main">
          <div id="menucontent">
            <div className="flyout-label">
              概览<span className="proTip">(One person can only buy one)</span>
            </div>
            <section id="s_conf">
              <section id="s_exterieur">
                <div className="content">
                  <div className="same_two car_body">
                    车身颜色
                    <i className="iconfont icon-arrowdown" />
                  </div>

                  <div className="car_color">
                    <div id="normal_color" className="extColor special_color">
                      <span className="same_Font">标准颜色</span>
                      <ul>
                        <li title="黑色" className="cColor" />
                        <li title="白色" className="cColor" />
                        <li title="卫红" className="cColor" />
                        <li title="竞速黄" className="cColor" />
                        <li title="胭脂红" className="cColor" />
                      </ul>
                    </div>
                  </div>
                </div>
              </section>
              <section id="s_exterieur">
                <div className="content">
                  <div className="same_two car_p">
                    配置:
                    <i className="iconfont icon-arrowdown" />
                  </div>
                  <div className="configuration">
                    <i title="low-$1000" className="car_deploy">
                      低配版
                    </i>
                    <i title="standard-$10000" className="car_deploy">
                      标准版
                    </i>
                    <i title="high-$100000" className="car_deploy">
                      高配版
                    </i>
                    <i title="upstage-$10000000" className="car_deploy">
                      顶配版
                    </i>
                  </div>
                </div>
              </section>
              <section id="s_exterieur">
                <div className="content">
                  <div className="same_two car_body">
                    价格：
                    <i className="iconfont icon-arrowdown" />
                  </div>
                  <div id="price" />
                </div>
              </section>
              <section id="to_car">
                <div>
                  <a href="javascript:;" className="addToCar">
                    立即购买
                    <i className="iconfont icon-arrowright" />
                  </a>
                </div>
              </section>
            </section>
          </div>
        </div>

        {/* -----------------------------------------lunbo */}
        <div
          id="carouselExampleControls"
          className="carousel slide"
          data-ride="carousel"
        >
          <div className="carousel-inner">
            <div className="carousel-item active one-img">
              <img className="d-block w-100 " src="" alt="First slide" />
            </div>
            <div className="carousel-item two-img">
              <img className="d-block w-100" src="" alt="Second slide" />
            </div>
            <div className="carousel-item three-img">
              <img className="d-block w-100" src="" alt="Third slide" />
            </div>
          </div>
          <a
            className="carousel-control-prev"
            href="#carouselExampleControls"
            role="button"
            data-slide="prev"
          >
            <span className="carousel-control-prev-icon" aria-hidden="true" />
            <span className="sr-only">Previous</span>
          </a>
          <a
            className="carousel-control-next"
            href="#carouselExampleControls"
            role="button"
            data-slide="next"
          >
            <span className="carousel-control-next-icon" aria-hidden="true" />
            <span className="sr-only">Next</span>
          </a>
        </div>

        <section id="s_interieur">
          <div id="AI_sHeadline" className="same_one">
            Details
          </div>
          <p className="same_x">
            details:
            玻璃有反光性。光线在某些情形可能会造成较浅颜色的仪表盘在挡风玻璃内侧产生明显的反光。为确保您对配置的选择满意，请要求您的保时捷经销商安排在不同情形下的试驾，包括使用偏光太阳镜。
          </p>
          
        </section>
        <div className="p_comment"><Comment /></div>
      </div>
    );
  }
}

module.exports = Details;
